﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI CSS美化语音工具</title>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --success: #4cc9f0;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --border: #dee2e6;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--dark);
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            text-align: center;
            padding: 25px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .main-content {
            display: flex;
            padding: 20px;
            gap: 20px;
        }
        
        .input-section {
            flex: 1;
        }
        
        .preview-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .panel {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        
        .panel-header {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border);
        }
        
        .voice-input {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .voice-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
        }
        
        .voice-btn:hover {
            background: var(--secondary);
        }
        
        .voice-btn.listening {
            background: #e63946;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .status {
            text-align: center;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            display: none;
        }
        
        .status.listening {
            display: block;
            background: #ffe5e9;
            color: #e63946;
        }
        
        .status.processing {
            display: block;
            background: #e0f4ff;
            color: var(--primary);
        }
        
        .status.error {
            display: block;
            background: #ffe5e5;
            color: #d32f2f;
        }
        
        .status.success {
            display: block;
            background: #e7f6e9;
            color: #2e7d32;
        }
        
        .transcript {
            background: var(--light);
            padding: 15px;
            border-radius: 8px;
            min-height: 100px;
            margin-top: 15px;
            border-left: 4px solid var(--primary);
        }
        
        .code-container {
            background: #2d3436;
            color: #f5f6fa;
            border-radius: 8px;
            padding: 20px;
            overflow-x: auto;
            font-family: 'Fira Code', monospace;
            line-height: 1.5;
        }
        
        .preview-container {
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            min-height: 300px;
            background: white;
            overflow: auto;
            transition: all 0.5s ease;
        }
        
        .html-tag {
            color: #e74c3c;
        }
        
        .html-attr {
            color: #f39c12;
        }
        
        .html-content {
            color: #3498db;
        }
        
        .css-selector {
            color: #05c46b;
        }
        
        .css-property {
            color: #0fbcf9;
        }
        
        .css-value {
            color: #f53b57;
        }
        
        .css-comment {
            color: #808e9b;
        }
        
        .btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s;
        }
        
        .btn:hover {
            background: var(--secondary);
        }
        
        .btn-disabled {
            background: var(--gray);
            cursor: not-allowed;
        }
        
        .btn-disabled:hover {
            background: var(--gray);
        }
        
        .api-key-container {
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .api-input {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 5px;
            margin-top: 5px;
            font-family: monospace;
        }
        
        .explanation {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            border-left: 4px solid var(--primary);
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>AI CSS美化语音工具</h1>
            <p class="subtitle">通过语音输入让AI美化CSS样式 - 在线工具</p>
        </header>
        
        <div class="main-content">
            <div class="input-section">
                <div class="panel">
                    <div class="panel-header">语音输入</div>
                    <div class="voice-input">
                        <button id="startBtn" class="voice-btn">
                            <i>🎤</i> 开始语音输入
                        </button>
                        <div id="status" class="status"></div>
                        
                        <div>
                            <label>语音输入内容:</label>
                            <div id="transcript" class="transcript">
                                请点击上方按钮开始语音输入...
                            </div>
                        </div>
                        
                        <button id="applyCssBtn" class="btn btn-disabled" disabled>
                            应用AI生成的CSS样式
                        </button>
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-header">HTML代码</div>
                    <div class="code-container">
                        <span class="html-tag">&lt;!DOCTYPE html&gt;</span><br>
                        <span class="html-tag">&lt;html lang="zh-CN"&gt;</span><br>
                        <span class="html-tag">&lt;head&gt;</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="html-tag">&lt;title&gt;</span><span class="html-content">网页标题</span><span class="html-tag">&lt;/title&gt;</span><br>
                        <span class="html-tag">&lt;/head&gt;</span><br>
                        <span class="html-tag">&lt;body&gt;</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="html-tag">&lt;h1&gt;</span><span class="html-content">这是一个一级标题</span><span class="html-tag">&lt;/h1&gt;</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="html-tag">&lt;p&gt;</span><span class="html-content">这是一个段落文本。</span><span class="html-tag">&lt;/p&gt;</span><br>
                        <span class="html-tag">&lt;/body&gt;</span><br>
                        <span class="html-tag">&lt;/html&gt;</span>
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-header">AI生成的CSS代码</div>
                    <div class="code-container">
                        <span id="generatedCss">// AI生成的CSS代码将显示在这里</span>
                    </div>
                </div>
                
                <div class="api-key-container">
                    <label>Long-Cat API密钥:</label>
                    <input type="password" class="api-input" id="apiKey" placeholder="输入您的API密钥" value="">
                    <p style="font-size: 0.8rem; color: var(--gray); margin-top: 5px;">
                        使用Long-Cat API进行CSS美化
                    </p>
                </div>
            </div>
            
            <div class="preview-section">
                <div class="panel">
                    <div class="panel-header">预览效果</div>
                    <div class="preview-container" id="preview">
                        <h1>这是一个一级标题</h1>
                        <p>这是一个段落文本。</p>
                    </div>
                </div>
                
                <div class="explanation">
                    <h3>使用说明:</h3>
                    <p>1. 点击"开始语音输入"按钮，描述你想要的CSS样式（例如："蓝色背景，居中标题，红色段落"）</p>
                    <p>2. 查看语音识别结果，确认无误</p>
                    <p>3. 点击"应用AI生成的CSS样式"按钮</p>
                    <p>4. 在右侧预览区域查看美化后的效果</p>
                    <p>5. 确保已输入正确的Long-Cat API密钥</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const startBtn = document.getElementById('startBtn');
            const applyCssBtn = document.getElementById('applyCssBtn');
            const status = document.getElementById('status');
            const transcript = document.getElementById('transcript');
            const generatedCss = document.getElementById('generatedCss');
            const preview = document.getElementById('preview');
            const apiKeyInput = document.getElementById('apiKey');
            
            // 检查浏览器是否支持语音识别
            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!SpeechRecognition) {
                startBtn.disabled = true;
                startBtn.classList.add('btn-disabled');
                startBtn.innerHTML = '<i>❌</i> 浏览器不支持语音识别';
                transcript.textContent = '您的浏览器不支持语音识别API。请使用Chrome或Edge浏览器。';
                return;
            }
            
            const recognition = new SpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = true;
            recognition.lang = 'zh-CN';
            
            let isListening = false;
            let finalTranscript = '';
            
            startBtn.addEventListener('click', function() {
                if (isListening) {
                    recognition.stop();
                    return;
                }
                
                finalTranscript = '';
                transcript.textContent = '';
                status.textContent = '正在聆听...请说话';
                status.className = 'status listening';
                startBtn.innerHTML = '<i>⏹️</i> 停止录音';
                startBtn.classList.add('listening');
                isListening = true;
                
                recognition.start();
            });
            
            recognition.onresult = function(event) {
                let interimTranscript = '';
                
                for (let i = event.resultIndex; i < event.results.length; ++i) {
                    if (event.results[i].isFinal) {
                        finalTranscript += event.results[i][0].transcript;
                    } else {
                        interimTranscript += event.results[i][0].transcript;
                    }
                }
                
                transcript.textContent = finalTranscript + interimTranscript;
            };
            
            recognition.onend = function() {
                status.textContent = '语音识别完成';
                status.className = 'status';
                startBtn.innerHTML = '<i>🎤</i> 开始语音输入';
                startBtn.classList.remove('listening');
                isListening = false;
                
                if (finalTranscript.trim() !== '') {
                    applyCssBtn.disabled = false;
                    applyCssBtn.classList.remove('btn-disabled');
                    
                    // 生成CSS代码
                    generateCssFromTranscript(finalTranscript);
                }
            };
            
            recognition.onerror = function(event) {
                console.error('语音识别错误:', event.error);
                status.textContent = '错误: ' + event.error;
                status.className = 'status error';
                startBtn.innerHTML = '<i>🎤</i> 开始语音输入';
                startBtn.classList.remove('listening');
                isListening = false;
            };
            
            applyCssBtn.addEventListener('click', function() {
                status.textContent = '应用CSS样式中...';
                status.className = 'status processing';
                
                // 应用生成的CSS到预览区域
                applyCssToPreview(generatedCss.textContent);
                
                setTimeout(function() {
                    status.textContent = 'CSS样式已应用!';
                    status.className = 'status success';
                    setTimeout(function() {
                        status.className = 'status';
                    }, 2000);
                }, 1000);
            });
            
            // 生成模拟CSS的函数
            function generateMockCss(transcript) {
                let cssCode = '/* 模拟AI根据您的描述生成的CSS: "' + transcript + '" */\n\n';
                
                // 根据语音描述生成相应的CSS
                if (transcript.includes('蓝色') || transcript.includes('blue')) {
                    cssCode += 'body { background-color: skyblue; }\n';
                }
                
                if (transcript.includes('居中') || transcript.includes('center')) {
                    cssCode += 'h1 { text-align: center; }\n';
                    cssCode += 'p { text-align: center; }\n';
                }
                
                if (transcript.includes('红色') || transcript.includes('red')) {
                    cssCode += 'p { color: #e63946; }\n';
                }
                
                if (transcript.includes('大') || transcript.includes('big')) {
                    cssCode += 'h1 { font-size: 2.5rem; }\n';
                }
                
                if (transcript.includes('现代') || transcript.includes('modern')) {
                    cssCode += 'body { font-family: "Segoe UI", sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }\n';
                    cssCode += 'h1 { color: #1d3557; border-bottom: 2px solid #457b9d; padding-bottom: 10px; }\n';
                }
                
                // 如果没有匹配到任何关键词，使用默认的CSS美化
                if (cssCode === '/* 模拟AI根据您的描述生成的CSS: "' + transcript + '" */\n\n') {
                    cssCode += 'body { \n    background-color: #f8f9fa; \n    font-family: "Microsoft YaHei", sans-serif; \n    padding: 40px; \n    line-height: 1.6; \n}\n\n';
                    cssCode += 'h1 { \n    color: darkblue; \n    text-align: center; \n    margin-bottom: 20px; \n}\n\n';
                    cssCode += 'p { \n    background-color: white; \n    padding: 15px; \n    border-radius: 8px; \n    box-shadow: 0 2px 4px rgba(0,0,0,0.1); \n}';
                }
                
                generatedCss.textContent = cssCode;
                return cssCode;
            }
            
            async function generateCssFromTranscript(transcript) {
                const apiKey = apiKeyInput.value;
                
                if (!apiKey) {
                    status.textContent = '未提供API密钥，使用模拟响应';
                    status.className = 'status';
                    generateMockCss(transcript);
                    return;
                }
                
                status.textContent = '正在向AI发送请求...';
                status.className = 'status processing';
                
                try {
                    // 使用服务器端代理
                    const response = await fetch('/api/generate-css', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            transcript: transcript,
                            apiKey: apiKey
                        })
                    });
                    
                    if (!response.ok) {
                        const errorData = await response.json();
                        throw new Error(errorData.error || `服务器错误: ${response.status}`);
                    }
                    
                    const data = await response.json();
                    
                    if (data.css) {
                        generatedCss.textContent = data.css;
                        status.textContent = 'AI响应已接收';
                        status.className = 'status success';
                    } else {
                        throw new Error('服务器返回的数据格式不正确');
                    }
                    
                } catch (error) {
                    console.error('API请求错误:', error);
                    status.textContent = 'API请求失败，使用模拟响应: ' + error.message;
                    status.className = 'status error';
                    generateMockCss(transcript);
                }
            }
            
            function applyCssToPreview(cssCode) {
                // 清除之前的样式
                preview.innerHTML = '<h1>这是一个一级标题</h1><p>这是一个段落文本。</p>';
                
                // 提取CSS代码（移除注释）
                const cssLines = cssCode.split('\n');
                let pureCss = '';
                
                for (const line of cssLines) {
                    if (!line.trim().startsWith('/*') && !line.trim().endsWith('*/')) {
                        pureCss += line + '\n';
                    }
                }
                
                // 创建style元素并添加到预览区域
                const style = document.createElement('style');
                style.textContent = pureCss;
                preview.appendChild(style);
            }
            
            // 初始示例CSS
            generatedCss.textContent = `/* 等待语音输入生成CSS代码 */\n\nbody { \n    background-color: #f0f8ff; \n    font-family: "Microsoft YaHei", sans-serif; \n    padding: 40px; \n}\n\nh1 { \n    color: darkblue; \n    text-align: center; \n}\n\np { \n    background-color: white; \n    padding: 15px; \n    border-radius: 8px; \n    box-shadow: 0 2px 4px rgba(0,0,0,0.1); \n}`;
        });
    </script>
</body>
</html>